
$(function() {
    const navData = [
        {
            id: 'BA10TA81wangning',
            text: '娱乐'
        },
        {
            id: 'BD2A9LEIwangning',
            text: '电影'
        },
        {
            id: 'BD2AB5L9wangning',
            text: '明星'
        },
        {
            id: 'BD2AC4LMwangning',
            text: '音乐'
        },
        {
            id: 'BA8E6OEOwangning',
            text: '体育'
        },
        {
            id: 'BA8EE5GMwangning',
            text: '财经'
        },
        {
            id: 'BAI67OGGwangning',
            text: '军事'
        },
        {
            id: 'DE0CGUSJwangning',
            text: '军情'
        },
    ]

    // http://localhost:63342/3.16/163-jquery-a/index.html
    // http://localhost:63342/3.16/163-jquery-a/index.html
    // http://localhost:63342/3.16/163-jquery-a/index.html?id=BD2A9LEIwangning
    // http://localhost:63342/3.16/163-jquery-a/index.html?id=BAI67OGGwangning
// navData.forEach()

    let currentPage = 1
    let pageCount = 10
    let currentType = getQuery('id') || 'BA10TA81wangning'

    $.each(navData, function (index, item) {
        if (currentType === item.id) {
            $('.title ul').append(`<li style="color: red;">${item.text}</li>`)
        } else {
            $('.title ul').append(`<li>
                                <a style="color: #333;" href="index.html?id=${item.id}">${item.text}</a>
                               </li>`)
        }
        // console.log(item)
    })

    function getQuery(key) {
        let arr = location.search.slice(1).split('&')
        for (let i = 0; i < arr.length; i++) {
            let item = arr[i].split('=')
            if (item[0] === key) {
                return item[1]
            }
        }
    }
    /*
    $('.title ul').on('click', 'li', function () {
        // console.log($(this).attr('data-id'))
        let id = $(this).data('id')
        currentPage = 1
        fetchNews(id, currentPage)
        $('.content').html('')
        // index.html?id=rtyukjhg
    })
    */


    function fetchNews(type = currentType, page = currentPage, count = pageCount) {
        $.ajax ({
            url: `https://3g.163.com/touch/reconstruct/article/list/${type}/${(page - 1) * count}-${pageCount}.html`,
            dataType: 'jsonp',
            jsonpCallback: 'artiList',
            success(res) {
                console.log(type)
                console.log(res[type])
                $.each(res[type], function (index, item) {
                    $(`<a href="javascript:void(0)">
                    <span>${item.title}</span>
                    <img src="${item.imgsrc}" alt="${item.title}">
                   </a>`).appendTo('.content')
                })
                // $('.fetch-more').show()
                // $('.fetch-more').removeAttr('disabled')
                // on
            } ,
            error (e) {

            }
        })
    }

    fetchNews()

    /*
    1   0-10.html
    2   10-10.html
    3   20-10.html
    (1 - 1) * 10 = 0
    (2 - 1) * 10 = 10
    (3 - 1) * 10 = 20
    currentPage = 1
    pageCount = 10
    * */

    // on off

    $('.fetch-more').on('click', function () {
        currentPage += 1
        console.log(currentPage)
        // $('.fetch-more').hide()
        // off
        $('.fetch-more').attr('disabled', 'disabled')
        fetchNews(currentType, currentPage)
    })

    $(document).on('scroll', function (event) {
        if ($(window).height() + $(document).scrollTop() >= $(document).height()) {
            // currentPage += 1
            // console.log(currentPage)
            // fetchNews(currentType, currentPage)
            // console.log('到达底部了')
        }
        // console.log(event)
        // console.log('=',$(window).height() + $(document).scrollTop())
        // console.log('-',$(document).height())
        // console.log($(document).innerHeight())
        // console.log($(document).outerHeight())
    })









})



// $('.title ul li').trigger('click')

